import { throwError } from "@/utils/error";
import { getFirstValidNode } from "@/utils/vnode";
import { cloneVNode, ComponentPublicInstance, Ref, VNode } from "vue";

type EventHandler = (e: Event) => any;

interface IRenderTriggerProps extends Record<string, unknown> {
  ref: string | Ref<ComponentPublicInstance | HTMLElement>;
  onCllick?: EventHandler;
  onMouseover?: EventHandler;
  onMouseleave?: EventHandler;
  onFocus?: EventHandler;
}

export default function renderTrigger(
  trigger: VNode[],
  extraProps: IRenderTriggerProps
) {
  const firstElement = getFirstValidNode(trigger,1);
  if(!firstElement) throwError('renderTrigger', 'trigger expects single rooted node')
  return cloneVNode(firstElement,extraProps,true)
}
